<template>
    <div class="warp">
        <div class="logo">
            <img src="@/assets/img/topleft.png" alt="车查查">
            <!-- <img src="@/assets/img/topRight.png" alt="车查查"> -->
        </div>

        <div class="title">{{ 'EPC查询' }}</div>
        <div class="search">
            <span>{{ 'VIN：' }}</span>
            <el-input v-model="inputVin" prefix-icon="el-icon-search" style="width:25%" @keyup.enter.native="search()">
            </el-input>
            <el-button type="primary" @click="search()" class="margin-l-25">查询 </el-button>
        </div>
        <div class="content">
            <div class="left">
                <el-input type="text" v-model="lpjName" prefix-icon="el-icon-search" placeholder="零配件名称 / 零件号"
                    @keyup.enter.native="searchlpj">
                    <el-button slot="append" icon="el-icon-search" @click="searchlpj"></el-button>
                </el-input>
                <el-tree v-show="treeShow" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
                    highlight-current :style="{ 'height': treeHeight, 'overflow-y': 'auto' }">

                </el-tree>
                <el-tree v-show="!treeShow" :data="treeDatalpj" :props="defaultPropslpj" @node-click="handleNodeClick"
                    highlight-current :style="{ 'height': treeHeight, 'overflow-y': 'auto' }">
                </el-tree>
            </div>
            <div class="right" ref="rightDiv" :style="{ 'height': rightHeight }">
                <div class="basic" ref="basicForm">
                    <el-form :model="carForm" ref="carForm" label-width="90px" class="demo-ruleForm">
                        <el-row :gutter="24">
                            <el-col :span="8">
                                <el-form-item label="名称:" prop="carName">
                                    <el-input type="text" v-model="carForm.carName" readonly></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="8">
                                <el-form-item label="车型:" prop="carmodels">
                                    <el-select v-model="carForm.carmodels" clearable style="width:100%" @change="selectCar">
                                        <el-option v-for="item in optionsCar" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="基本信息:">
                        </el-form-item>
                        <el-form-item>
                            <el-form :model="basicForm" label-width="auto" label-position="left" class="demo-basicForm">
                                <el-row :gutter="24">
                                    <el-col :span="8">
                                        <el-form-item label="车型大类" prop="basicForm.vehCateNames">{{
                                            basicForm.vehCateNames
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="车型一级分类" prop="basicForm.vehCateOneNames">{{
                                            basicForm.vehCateOneNames
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="车型二级分类" prop="basicForm.vehCateTwoNames">{{
                                            basicForm.vehCateTwoNames
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="车辆厂商指导价" prop="basicForm.price">{{
                                            basicForm.price
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="新车市场价" prop="basicForm.purchasePrice">{{
                                            basicForm.purchasePrice
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="排量（L）" prop="basicForm.displacement">{{
                                            basicForm.displacement
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="动力类型" prop="basicForm.powerType">{{
                                            basicForm.powerType
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="座位数" prop="basicForm.seats">{{
                                            basicForm.seats
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="车身结构" prop="basicForm.bodyType">{{
                                            basicForm.bodyType
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="进气形式" prop="basicForm.airIntakeType">{{
                                            basicForm.airIntakeType
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="驱动形式" prop="basicForm.drivenType">{{
                                            basicForm.drivenType
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="燃油喷射形式" prop="basicForm.fuelJetType">{{
                                            basicForm.fuelJetType
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="国别名称" prop="basicForm.countriesName">{{
                                            basicForm.countriesName
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="上市年份" prop="basicForm.marketDate">{{
                                            basicForm.marketDate
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="停产日期" prop="basicForm.stopDate">{{
                                            basicForm.stopDate
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="配置等级" prop="basicForm.cfgLevel">{{
                                            basicForm.cfgLevel
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="外形尺寸/长*宽*高(mm)" prop="basicForm.vehicleSize">{{
                                            basicForm.vehicleSize
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="前轮距(mm)" prop="basicForm.trackFront">{{
                                            basicForm.trackFront
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="后轮距(mm)" prop="basicForm.trackRear">{{
                                            basicForm.trackRear
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="轴距(mm)" prop="basicForm.wheelBase">{{
                                            basicForm.wheelBase
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="整备质量(kg)" prop="basicForm.fullWeight">{{
                                            basicForm.fullWeight
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="车门数" prop="basicForm.doorNum">{{
                                            basicForm.doorNum
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="发动机类型" prop="basicForm.engineModel">{{
                                            basicForm.engineModel
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="发动机描述" prop="basicForm.engineDesc">{{
                                            basicForm.engineDesc
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="燃油标号" prop="basicForm.roz">{{
                                            basicForm.roz
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="排放标准" prop="basicForm.effluentStandard">{{
                                            basicForm.effluentStandard
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="功率" prop="basicForm.power">{{
                                            basicForm.power
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="变速器档数(个)" prop="basicForm.gearNum">{{
                                            basicForm.gearNum
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="变速器类型" prop="basicForm.gearboxType">{{
                                            basicForm.gearboxType
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="前轮胎规格" prop="basicForm.frontTyreSize">{{
                                            basicForm.frontTyreSize
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="后轮胎规格" prop="basicForm.rearTyreSize">{{
                                            basicForm.rearTyreSize
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="ABS标识" prop="basicForm.absFlag">{{
                                            basicForm.absFlag
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="气缸排列形式" prop="basicForm.arrayType">{{
                                            basicForm.arrayType
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="发动机气门数(个)" prop="basicForm.valveNum">{{
                                            basicForm.valveNum
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="国产/进口" prop="basicForm.importFlag">{{
                                            basicForm.importFlag
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="VIN码出厂年份" prop="basicForm.amVinYear">{{
                                            basicForm.amVinYear
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="底盘号" prop="basicForm.chassisModel">{{
                                            basicForm.chassisModel
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="车身颜色" prop="basicForm.vehicleColor">{{
                                            basicForm.vehicleColor
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="上市时间" prop="basicForm.uploadDate">{{
                                            basicForm.uploadDate
                                        }}</el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="车组名称" prop="basicForm.amGroupName">{{
                                            basicForm.amGroupName
                                        }}</el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-form-item>
                        <el-form-item label="车辆零配件:" prop="lpj" style="position: relative; top: -36px;width: 100%;">
                            <div ref="lpjRef">
                                <el-tooltip class="item" v-for="(item, index) in carlpj" :key="index" effect="dark"
                                    :content="item.oe" placement="top-start">
                                    <el-radio :label="item.oeId" v-model="carForm.lpj" @change="selectlpj">{{
                                        item.oeName
                                    }}
                                    </el-radio>
                                </el-tooltip>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="width:100%;position: relative; top: -36px;">
                    <p style="text-align: right;font-size: 12px;color: #eee;padding-right: 2px;">
                        单价：元/个</p>
                    <el-table :data="tableData1" ref="tableData" class="tableData" border
                        style="width: 100%; height: 40vh; overflow-y: auto;margin-top: 1px;box-shadow: 0 0 2px #fff;"
                        :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
                        <el-table-column label="零部件名称" prop="oeName"> </el-table-column>
                        <el-table-column label="原厂零件号" prop="oe"> </el-table-column>
                        <el-table-column label="厂商指导价" prop="guidePrice"> </el-table-column>
                        <el-table-column label="华东区市场价" prop="marketPriceHd"></el-table-column>
                        <el-table-column label="华南区市场价" prop="marketPriceHn"></el-table-column>
                        <el-table-column label="西部区市场价" prop="marketPriceXb"></el-table-column>
                        <el-table-column label="东北区市场价" prop="marketPriceDb"></el-table-column>
                        <el-table-column label="华北区市场价" prop="marketPriceHb"></el-table-column>
                        <el-table-column label="操作" width="100px">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.boutton == '添加'" type="text" @click="add(scope.row)">{{
                                    scope.row.boutton
                                }}</el-button>
                                <el-button v-if="scope.row.boutton == '已添加'" type="text" style="color:#67c23a">{{
                                    scope.row.boutton
                                }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </div>
        </div>
        <el-collapse v-if="tableData2.length > 0" v-model="activeName">
            <el-collapse-item title="零配件导出列表" name="1">
                <!-- <p style="text-align: right;"><el-button type="primary">保存</el-button></p> -->
                <p style="text-align: right;font-size: 12px;">单价：元/个</p>
                <el-table :data="tableData2" class="lbjData" border highlight-current-row
                    style="width: 100%; margin-top: 1px;" :header-cell-style="{ textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }">
                    <el-table-column label="零部件名称" prop="oeName"> </el-table-column>
                    <el-table-column label="原厂零件号" prop="oe"> </el-table-column>
                    <el-table-column label="厂商指导价" prop="guidePrice"> </el-table-column>
                    <el-table-column label="华东区市场价" prop="marketPriceHd"></el-table-column>
                    <el-table-column label="华南区市场价" prop="marketPriceHn"></el-table-column>
                    <el-table-column label="西部区市场价" prop="marketPriceXb"></el-table-column>
                    <el-table-column label="东北区市场价" prop="marketPriceDb"></el-table-column>
                    <el-table-column label="华北区市场价" prop="marketPriceHb"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" style="color:#f56c6c" @click="canle(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
        </el-collapse>
        <p style="text-align: center;font-size: 13px;line-height: 72px; color: #B7B7B7;">鉴评云评估管理系统 V1.0 Copyright &copy;
            版权所有 车查查科技有限公司</p>
    </div>
</template>

<script>
import { findByvin, findBycar, carparts, price, getlpj, addlpj, getPrice, dellpj } from '@/api/Epc/epc';
export default {
    name: "EPC",
    components: {
    },
    data () {
        return {
            activeName: ['1'],
            lpjName: '',
            treeHeight: '',
            rightHeight: '',
            startHeight: '',
            inputVin: "",
            tableData1: [],
            tableData2: [],
            treeData: [],
            treeDatalpj: [],
            treeShow: true,
            defaultProps: {
                children: 'children',
                label: 'partGroupName'
            },
            defaultPropslpj: {
                label: 'partGroupName',
                //         value:partGroupId
                // label: 'oeName'
            },
            carForm: {
                carName: '',
                carmodels: '',
                lpj: ''
            },
            basicForm: {
                amVehicleName: "",
                amYear: "",
                vehCateNames: "",
                vehCateOneNames: "",
                vehCateTwoNames: '',
                price: "",
                purchasePrice: "",
                displacement: "",
                powerType: "",
                seats: "",
                bodyType: "",
                airIntakeType: "",
                drivenType: "",
                fuelJetType: "",
                countriesName: "",
                marketDate: "",
                stopDate: "",
                cfgLevel: "",
                vehicleSize: "",
                trackFront: "",
                trackRear: "",
                wheelBase: "",
                fullWeight: "",
                doorNum: "",
                engineModel: "",
                engineDesc: "",
                roz: "",
                effluentStandard: "",
                power: "",
                gearNum: "",
                gearboxType: "",
                frontTyreSize: "",
                rearTyreSize: "",
                absFlag: "",
                arrayType: "",
                valveNum: "",
                importFlag: "",
                amVinYear: "",
                chassisModel: "",
                amGroupName: "",
                vehicleColor: "",
                uploadDate: "",
            },
            optionsCar: [],
            dataCar: [],
            carlpj: []
        };
    },
    methods: {
        search () {
            this.optionsCar = []
            findByvin(this.inputVin).then(res => {
                this.carForm.carName = res.data[0].amMainBrandName + '-' + res.data[0].amSeriesName
                res.data.forEach(item => {
                    this.optionsCar.push({
                        label: item.amVehicleName,
                        value: item.amVehicleId
                    })
                });
                this.dataCar = res.data
            })
        },
        selectCar () {
            this.tableData2 = []
            getPrice({ userId: Number(localStorage.getItem('userId')), amVehicleId: this.carForm.carmodels }).then((res) => {
                if (res.data) {
                    this.tableData2 = res.data
                }
            })
            this.dataCar.forEach(item => {
                if (item.amVehicleId === this.carForm.carmodels) {
                    this.basicForm = item
                    findBycar({ amVehicleId: item.amVehicleId }).then((res) => {
                        this.treeData = this.formatToTree(res.data)
                        this.carlpj = []
                        this.tableData1 = []
                        this.rightHeight = this.startHeight - 36 + 'px'
                        this.treeHeight = this.startHeight - 77 + 'px'
                    })
                }
            })
        },
        searchlpj () {
            if (this.lpjName) {
                let obj = {
                    vin: this.inputVin,
                    amVehicleId: this.carForm.carmodels,
                    input: this.lpjName
                }
                getlpj(obj).then((res) => {
                    this.treeDatalpj = res.data
                    this.treeShow = false
                })
            } else {
                this.treeShow = true
            }


        },
        // valueID (arr) {
        //     arr.map(item => {
        //         item.label = item.partGroupName
        //         if (item.children.length > 0) {
        //             item.children = this.valueID(item.children)
        //         } else {
        //             item.children = []
        //         }
        //     })
        // },
        formatToTree (ary, pid) {
            return ary
                .filter((item) =>
                    // 如果没有父id（第一次递归的时候）将所有父级查询出来
                    // 这里认为 item.parentId === 1 就是最顶层 需要根据业务调整
                    pid === undefined ? item.parentId == 0 : item.parentId == pid
                )
                .map((item) => {
                    // 通过父节点ID查询所有子节点
                    item.children = this.formatToTree(ary, item.partGroupId);
                    return item;
                });
        },
        handleNodeClick (obj, node, sel) {
            this.carlpj = []
            return new Promise((resolve, reject) => {
                if (obj.children && obj.children.length == 0) {
                    var jet = {
                        vin: this.inputVin,
                        amVehicleId: this.carForm.carmodels,
                        partGroupId: obj.partGroupId
                    }
                } else if (!obj.children) {
                    var jet = {
                        vin: this.inputVin,
                        amVehicleId: this.carForm.carmodels,
                        partGroupId: obj.partGroupId
                    }
                }
                carparts(jet).then((res) => {
                    this.carlpj = res.data
                    resolve()
                })

            }).then(val => {
                this.treeHeight = this.startHeight - 112 + this.$refs.lpjRef.offsetHeight + 'px'
                this.rightHeight = this.startHeight - 72 + this.$refs.lpjRef.offsetHeight + 'px'
                // console.log('sss', this.rightHeight, this.startHeight, this.$refs.lpjRef.offsetHeight)

            }).catch(() => {

            })

        },
        selectlpj () {
            price(this.carForm.lpj).then((res) => {

                for (let i = 0; i < this.carlpj.length; i++) {
                    if (this.carlpj[i].oeId == this.carForm.lpj) {
                        let obj = Object.assign({ oeName: this.carlpj[i].oeName, oe: this.carlpj[i].oe, boutton: '添加' }, res.data)
                        if (this.tableData2.length > 0) {
                            for (let k = 0; k < this.tableData2.length; k++) {
                                if (obj.oe == this.tableData2[k].oe && obj.oeName == obj.oeName) {
                                    obj.boutton = '已添加'
                                }
                            }
                        }
                        if (this.tableData1.length == 0) {
                            this.tableData1.push(obj)
                            return
                        } else {
                            for (let j = 0; j < this.tableData1.length; j++) {
                                if (this.tableData1[j].oeId == obj.oeId) {
                                    return
                                } else {
                                    if (j == this.tableData1.length - 1) {
                                        this.tableData1.push(obj)
                                    }
                                }
                            }

                        }
                    }
                }

            })
        },
        add (row) {
            let obj = {
                userId: localStorage.getItem('userId'),
                vin: this.inputVin,
                oe: row.oe,
                oeName: row.oeName,
                amVehicleId: this.carForm.carmodels,
                guidePrice: row.guidePrice,
                marketPriceHd: row.marketPriceHd,
                marketPriceHn: row.marketPriceHn,
                marketPriceXb: row.marketPriceXb,
                marketPriceDb: row.marketPriceDb,
                marketPriceHb: row.marketPriceHb
            }
            addlpj(obj).then((res) => {
                if (res.code == 200) {
                    row.boutton = '已添加'
                    getPrice({ userId: Number(localStorage.getItem('userId')), amVehicleId: this.carForm.carmodels }).then((res) => {
                        this.tableData2 = res.data
                    })
                }
                else {
                    this.$message.error('添加失败！')
                }
            })
        },
        canle (row) {
            for (let i = 0; i < this.tableData2.length; i++) {
                if (this.tableData2[i].id == row.id) {
                    dellpj('id=' + row.id).then((res) => {
                        if (res.code == 200) {
                            this.tableData2.splice(i, 1)
                            for (let j = 0; j < this.tableData1.length; j++) {
                                if (row.oe == this.tableData1[j].oe) {
                                    this.tableData1[j].boutton = '添加'
                                    return
                                }
                            }
                        } else {
                            this.$message.error('删除失败！')
                            return
                        }

                    })
                }
            }
        },

    },
    mounted () {
        this.startHeight = this.$refs.rightDiv.offsetHeight
        this.rightHeight = this.$refs.rightDiv.offsetHeight - 36 + 'px'
        this.treeHeight = this.$refs.rightDiv.offsetHeight - 77 + 'px'
        // getPrice({ userId: Number(localStorage.getItem('userId')), amVehicleId: this.carForm.carmodels }).then((res) => {
        //     if (res.data) {
        //         this.tableData2 = res.data
        //     }
        // })
    }
}
</script>

<style scoped lang="less">
.warp {
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-image: url("@/assets/img/background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}

.logo {
    width: 100%;
    //     display: flex;
    //     justify-content: space-between;
}

.logo img {
    width: 22%;
    height: auto;
    position: relative;
    left: 0;
    top: 0;
}

.title {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-family: cursive;
    font-weight: 600;
    color: #eee;
    // margin-top: 5vh;
}

.search {
    width: 100%;
    display: flex;
    margin: 10px auto 50px;
    justify-content: center;
}

.search span {
    line-height: 36px;
    color: #eee;
}

.content {
    width: 90%;
    margin: 0 auto 10px;
    display: flex;
    justify-content: space-between;

    .left {
        width: 16%;

        .el-tree {
            margin-top: 5px;
            padding-top: 10px;
            padding-bottom: 15px;
            border-radius: 2px;
        }

        :deep .el-input__inner {

            // border: none;
            &:focus {
                border-right-color: rgb(133, 133, 133);
            }
        }
    }

    .right {
        width: 84%;
        padding: 15px 1px 1px 1px;
        // border: 1px solid #aaa;
        box-shadow: 0 0 2px #fff;
        margin-left: 10px;
    }
}

.basic {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .el-form {
        width: 100%;
    }

    .box-card {
        width: 20%;
    }
}

.el-form /deep/ .el-form-item__label {
    font-size: 13px;
    color: #eee;
}

:deep .el-checkbox__label {
    color: #eee;
}

:deep .el-card.is-always-shadow {
    box-shadow: none;
}

.text-item span {
    cursor: pointer;
    line-height: 36px;
    font-size: 13px;

    //   &:hover{
    //     font: 600;
    //     color: #2EB3FF;
    //   }
    &:active {
        color: #2EB3FF;
    }
}

.demo-basicForm {
    color: #bbb;
    position: relative;
    top: -36px;
    height: 20vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.el-radio+.el-radio {
    margin-left: 0;
}

.el-radio {
    width: 20%;
    color: #eee;
}

:deep .el-radio__inner {
    background-color: #eee;
}

/deep/ .el-table::before {
    z-index: inherit;
}

:deep .el-table th>.cell {
    font-family: '微软雅黑', Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "sans-serif";
    font-size: 13px;
    letter-spacing: 2px
}

.warp {

    /* 整个滚动条 */
    ::-webkit-scrollbar {
        width: 6px;
        // height: 4px;
    }

    /* 滚动条上的滚动滑块 */
    ::-webkit-scrollbar-thumb {
        // background-color: #2EB3FF;
        background-color: #888;
        /* 关键代码 */
        // background-image: -webkit-linear-gradient(45deg,
        //         rgba(255, 255, 255, 0.4) 25%,
        //         transparent 25%,
        //         transparent 50%,
        //         rgba(255, 255, 255, 0.4) 50%,
        //         rgba(255, 255, 255, 0.4) 75%,
        //         transparent 75%,
        //         transparent);
        border-radius: 15px;
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
        // background-color: #dbeffd;
        background-color: #fff;
        border-radius: 15px;
    }
}

.el-collapse {
    width: 90%;
    margin: 25px auto;
    border-top: none;
    border-bottom: none;
}

:deep .el-collapse-item__header {
    padding-left: 20px;
}

:deep .el-collapse-item__wrap {
    padding-left: 10px;
    padding-right: 10px;
}
</style>
